<template>
  <div id="app">
      <Search :edit-model="editModel" class="search"/>
      <div class="background">
        <div style="position: relative">
          <Background :edit-model="editModel"/>
          <div class="cover"  :style="{background: focused ? '#00000088' : '#00000033', transition: 'all ease .3s'}"></div>
        </div>
      </div>
      <Links :edit-model="editModel" class="links" />
      <div class="edit" @click="editModel = !editModel"><i class="el-icon-setting"></i></div>
  </div>
</template>

<script>
import Search from '@/views/Search'
import Background from '@/components/Background'
import Links from '@/views/Links'
import { mapState } from 'vuex'

export default {
  name: 'app',
  data () {
    return {
      editModel: false,
      icon: ''
    }
  },
  computed: {
    ...mapState(['focused'])
  },
  components: {
    Search,
    Background,
    Links
  },
  mounted () {
    this.icon = document.querySelector('[rel="icon"]')
    document.addEventListener('visibilitychange',
      () => {
        if (document.visibilityState !== 'visible') {
          this.icon.href = './favicon_newtabpage_white.png'
        } else {
          this.icon.href = './favicon_newtabpage.png'
        }
      })
  }
}
</script>

<style>
#app {
  position: absolute;
  font-family: '微软雅黑 Light', Helvetica, Arial, sans-serif;
  background-image: linear-gradient(to right, #434343 0%, black 100%);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 0;
}

</style>

<style scoped lang="scss">
  .search {
    position: relative;
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 6;
  }
  .background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000033;
    z-index: 5;
  }
  .links {
    z-index: 4;
  }
  .edit {
    position: absolute;
    width: 8rem;
    height: 8rem;
    right: 0;
    bottom: 0;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      opacity: 1;
    }
  }
</style>
